<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <title>剧本预约</title>
</head>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
<script src="js/jquery1.42.min.js"></script>
<script src="js/TouchSlide.1.1.js"></script>
<script src="js/tool.js"></script>

<body>

<!--<header >
    <div class="title"><a class="nav-btn" href="index.html"></a><span>话剧模板</span></div>
</header>-->
<!-- 本例主要代码 Start ================================ -->
<!--<div id="bottomoTabBox" class="tabBox">-->
<div class="view">


    <div id="viewTab">
        <!--首页-->
        <div class="indexpage">
            <!--店铺地址电话-->
            <div class="store-info">
                <h1>一起剧本杀</h1>
                <p> <i class="iconfont icon-dianhua1"></i>18888888888</p>
                <p> <i class="iconfont icon-location1"></i>吉林省吉林市吉林大街万达广场</p>
            </div>

            <!--剧本杀库-->
            <div class="drama-list-bg">
                <div class="position-relative item-box" >
                    <a href="javascript:;"  class="aui-flex" >
                        <div class="aui-img drama3">
                        </div>
                        <div class="aui-flex-box">
                                <div>
                                    <h4 class="title"><span class="content ">天禅之殇<i class="free"></i></span></h4>
                                    <p class="detail"><span>4人</span><span>古风</span><span>苦难</span></p>
                                </div>
                                <div class="detail-box">
                                    <div>
                                        <p class="star">
                                            <span class="iconfont icon-xingxing-copy orange"></span>
                                            <span class="iconfont icon-xingxing-copy orange"></span>
                                            <span class="iconfont icon-xingxing-copy orange"></span>
                                            <span class="iconfont icon-xingxing-copy orange"></span>
                                            <span class="iconfont icon-xingxing-copy gray"></span>
                                        </p>
                                        <p class="person">721人评分</p>
                                    </div>
                                    <p class="avgescord  yellow"><span class="ft-14">9.1</span>分</p>
                                </div>
                        </div>
                    </a>

                    <a href="javascript:;"  class="aui-flex" >
                        <div class="aui-img drama8">
                        </div>
                        <div class="aui-flex-box">
                            <div>
                                <h4 class="title"><span class="content ">黑寡妇<i class="money"></i></span></h4>
                                <p class="detail"><span>1人</span><span>古风</span><span>简单</span></p>
                            </div>
                            <div class="detail-box">
                                <div>
                                    <p class="star">
                                        <span class="iconfont icon-xingxing-copy orange"></span>
                                        <span class="iconfont icon-xingxing-copy orange"></span>
                                        <span class="iconfont icon-xingxing-copy gray"></span>
                                        <span class="iconfont icon-xingxing-copy gray"></span>
                                        <span class="iconfont icon-xingxing-copy gray"></span>
                                    </p>
                                    <p class="person">621人评分</p>
                                </div>
                                <p class="avgescord  yellow"><span class="ft-14">8.5</span>分</p>
                            </div>
                        </div>
                    </a>

                    <a href="javascript:;"  class="aui-flex" >
                        <div class="aui-img drama9">
                        </div>
                        <div class="aui-flex-box">
                            <div>
                                <h4 class="title"><span class="content ">宿命<i class="free"></i></span></h4>
                                <p class="detail"><span>6人</span><span>惊悚</span><span>简单</span></p>
                            </div>
                            <div class="detail-box">
                                <div>
                                    <p class="star">
                                        <span class="iconfont icon-xingxing-copy orange"></span>
                                        <span class="iconfont icon-xingxing-copy orange"></span>
                                        <span class="iconfont icon-xingxing-copy orange"></span>
                                        <span class="iconfont icon-xingxing-copy gray"></span>
                                        <span class="iconfont icon-xingxing-copy gray"></span>
                                    </p>
                                    <p class="person">67人评分</p>
                                </div>
                                <p class="avgescord  yellow"><span class="ft-14">7.0</span>分</p>
                            </div>
                        </div>
                    </a>

                    <a href="javascript:;"  class="aui-flex" >
                        <div class="aui-img drama8">
                        </div>
                        <div class="aui-flex-box">
                            <div>
                                <h4 class="title"><span class="content">前世今生</span></h4>
                                <p class="detail"><span>4人</span><span>古风</span><span>苦难</span></p>
                            </div>
                            <div class="detail-box">
                                <div>
                                    <p class="star">
                                        <span class="iconfont icon-xingxing-copy orange"></span>
                                        <span class="iconfont icon-xingxing-copy orange"></span>
                                        <span class="iconfont icon-xingxing-copy orange"></span>
                                        <span class="iconfont icon-xingxing-copy orange"></span>
                                        <span class="iconfont icon-xingxing-copy gray"></span>
                                    </p>
                                    <p class="person">61人评分</p>
                                </div>
                                <p class="avgescord  yellow"><span class="ft-14">8.3</span>分</p>
                            </div>
                        </div>
                    </a>

                </div>

                <div style="height: 100px"></div>
            </div>
        </div>


        <!--预约-->
        <div class="appointpage">
            <!--list-->
            <a class="appoint-wrap" href="appointdetail.html">
                <div class="appoint-img-wrap">
                    <img src="img/drama-3.png"/>
                </div>
                <div class="appoint-name-wrap">
                    <div class="name-title">话剧--声声慢</div>
                    <p class="name-summary ellipsis">北宋灭亡,丈夫去世,一连串的打击使她尝尽了国破家亡。</p>
                </div>

                <div class="appoint-extra-wrap">
                    <div>
                        <span class="selling-price">￥78.00</span>
                        <span class="original-price">￥150.00</span>
                        <span>已预约：39</span><span>剩余：63</span>
                    </div>
                    <button class="extra-btn">立即预约</button>
                </div>
                <i class="promotion-icon"></i>
            </a>


            <!--list-->
            <a class="appoint-wrap" href="appointdetail.html">
                <div class="appoint-img-wrap">
                    <img src="img/drama7.jpg"/>
                </div>
                <div class="appoint-name-wrap">
                    <div class="name-title">话剧——无风地带</div>
                    <p class="name-summary ellipsis">《无风地带》以殖民统治时期的大连为历史背景。</p>
                </div>

                <div class="appoint-extra-wrap">
                    <div>
                        <span class="selling-price">￥78.00</span>
                        <span class="original-price">￥150.00</span>
                        <span>已预约：39</span><span>剩余：63</span>
                    </div>
                    <button class="extra-btn">立即预约</button>
                </div>
                <i class="promotion-icon"></i>
            </a>

        </div>

        <!--我的-->
        <div class="mypage">
            <div class="user-detail">
                <div class="user-header">
                    <div class="usericon-wrap">
                        <span id="toUserName"></span>
                    </div>
                    <span class="username">请点击登录</span>
                </div>
            </div>
            <div class="container">
                <div class="info-wrap">
                    <div class="info-detail-item">
                        <div class="detail-title" id="allOrderBtn">所有订单</div>
                        <div class="order-status-list" id="orderStatusList">
                            <a href="#" >
                                <span class="tip-bubble" >1</span>
                                <span class="status-icon wait-pay" style="background-color: rgb(51, 51, 51);"></span>
                                <span>待支付</span>
                            </a>
                            <a href="#" >
                                <span class="status-icon order-underway" style="background-color: rgb(51, 51, 51);"></span>
                                <span>进行中</span>
                                <span class="tip-bubble">22</span>
                            </a>
                            <a href="#" >
                                <span class="status-icon order-complete" style="background-color: rgb(51, 51, 51);"></span>
                                <span>已完成</span>
                            </a>
                            <a href="#" >
                                <span class="status-icon order-cancel" style="background-color: rgb(51, 51, 51);"></span>
                                <span>已取消</span>
                            </a>
                        </div>
                    </div>

                    <div class="info-detail-item">
                        <div class="detail-title"><span class="tip-bubble red position-center" >22</span>最新消息</div>
                        <div class="detail-title">我的订阅</div>
                        <div class="detail-title">我的表单</div>
                    </div>

                    <div class="info-detail-item user-info">
                        <div class="info-item address">
                            <i class="item-icon address-icon"></i>
                            <span class="item-text">xxx省xxx市xxx县xxx路xxx号</span>
                            <span class="dist"></span>
                            <i class="more-icon"></i>
                        </div>
                        <div class="info-item phone">
                            <i class="item-icon phone-icon"></i>
                            <span class="item-text">13800000000</span>
                            <i class="more-icon"></i>
                        </div>
                        <div class="info-item companyTime">
                            <i class="item-icon company-time-icon"></i>
                            <span class="item-text">周一至周五 09:00-18:00</span>
                        </div>
                        <div class="info-item introduction">
                            <i class="item-icon introduction-icon"></i>
                            <span class="item-text">这是话剧宣传的预约类模板</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>



        <div class="footer">
            <a href="#" class="index  on"><span></span><span>首页</span></a></a>
            <a href="#" class="appoint"><span></span><span>预约</span></a>
            <a href="#" class="my"><span></span><span>我的</span></a></a>
        </div>

        <!--浮动电话-->
        <!-- <div class="float-telephone" id="floatTel">
            <span class="icon iconfont icon-dianhua1"></span>
        </div>-->

    </div>
    <!--遮罩层 start-->
    <div class="fullscreen"></div>
    <div class="modal">
        <p>15688888888</p>
        <p class="cancel" id="cancel">取消</p>
    </div>
    <!--遮罩层 end-->


    <script>

        $(function(){

            /*点击tab*/
            $(".footer a").click(function(){
                $(".footer a").removeClass("on") ;
                var newView = $(this).attr("class")+"page" ;
                $("div[class$='page']").hide() ;
                $("."+newView+"").show() ;

                $(this).addClass("on") ;
            }) ;

            /*跳转到所有订单*/
            $("#allOrderBtn").click(function(){
                window.location.href = "allstatusorders.html" ;
            }) ;

            /*弹框显示*/
            $("#floatTel").click(function(){
                $(".fullscreen").fadeIn() ;
                $(".modal").fadeIn() ;
            }) ;

            /*弹框隐藏*/
            $("#cancel").click(function(){
                $(".fullscreen").fadeOut();
                $(".modal").fadeOut();
            })

            $("#toUserName").click(function(){
                window.location.href = "userinfo.html" ;
            });

            /*预约*/
            $(".book-list-box a").click(function(){
                window.location.href = "appointdetail.html" ;
            })

            /*剧本详情*/
            $(".aui-flex").click(function(){
                window.location.href = "appointdetail-sha.html" ;
            })

            /*各类订单跳转到所有订单后，选择对应的状态*/
            $("#orderStatusList a").click(function(){
                var index = $(this).index() + 1;
                window.location.href = "allstatusorders.html?param="+index ;
            })
        })
    </script>

    <!--<script type="text/javascript">TouchSlide({ slideCell:"#bottomoTabBox",titCell:".hd a" ,delayTime:0});</script>-->
</body>
</html>
